<%--
  Created by IntelliJ IDEA.
  User: apple
  Date: 2022/4/26
  Time: 3:41 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%String path = request.getContextPath()+"/";%>
<!doctype html>
<html>
<head>
    <base href="<%=path%>">
    <title>用户新增/编辑</title>
    <link href="js/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
    <link href="css/bootstrap.min.css?v=3.3.7" rel="stylesheet">

</head>
<style>
    .error{
        color: red;
        position: absolute;
        line-height:40px;
        right:0px;
    }
</style>
<body style="overflow-x: hidden">
<form class="form-horizontal" id="objectForm">
    <input type="hidden" name="roleId" value="${role.roleId}"/>
    <div class="form-group">
        <div class="col-sm-12">
            <label  class="col-sm-4 control-label">*角色名称</label>
            <div class="col-sm-8">
                <input type="text"  class="form-control" name="roleName" value="${role.roleName}" id="roleName" placeholder="角色名称">

            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-12">
            <label  class="col-sm-4 control-label">*权限字符</label>
            <div class="col-sm-8">
                <input type="text"  class="form-control" name="rolePermission" value="${role.rolePermission}" id="rolePermission" placeholder="权限字符">

            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-12">
            <label  class="col-sm-4 control-label">*显示顺序</label>
            <div class="col-sm-8">
                <input type="text"  class="form-control" name="sortNum" value="${role.sortNum}" id="sortNum" placeholder="显示顺序">
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-12">
            <label  class="col-sm-4 control-label">状态</label>
            <div class="col-sm-8">
                <select name="status" class="form-control">
                    <option value="0">正常</option>
                    <option value="1">停用</option>
                </select>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-12">
            <label  class="col-sm-4 control-label">资源权限</label>
            <div class="col-sm-8">
               <input type="checkbox" onclick="expandAll(this);">展开/折叠
                <input type="checkbox" onclick="checkAllNodes(this);">全选/全不选
                <input type="checkbox" checked onclick="isGl(this);">父子联动
            </div>

        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-4 control-label"></label>
        <div class="col-sm-8" >
            <div id="resourceTree" class="ztree" style="border: 1px solid #ccc;"></div>
        </div>
    </div>

    <div class="form-group" >
        <div class="col-sm-4"></div>
        <div class="col-sm-8" style="align:center">
            <button type="button" class="btn btn-warning" onclick="save();"><i class="glyphicon glyphicon-saved"></i>保存</button>
            <button type="reset" class="btn btn-warning"><i class="glyphicon glyphicon-refresh"></i>重置</button>
        </div>
    </div>
</form>
</body>
<script src="js/jquery.min.js?v=2.1.4"></script>

<script src="js/bootstrap.min.js?v=3.3.7"></script>
<script src="js/plugins/layer/layer.min.js"></script>
<script src="js/plugins/validate/jquery.validate.min.js"></script>
<script src="js/plugins/validate/messages_zh.min.js"></script>
<script src="js/plugins/ztree/js/jquery.ztree.core.js"></script>
<script src="js/plugins/ztree/js/jquery.ztree.excheck.js"></script>
<script src="js/sofwin.js"></script>
<script>
    var deptName;
    var deptId;
    var zTreeObj;
    // 给当前form表单添加了表单验证规则
    $("form").validate({
        rules:{
            roleName:{
                required:true
            },
            orderNum:{
                required:true
            },
            rolePermission:{
                required:true
            }
        },
        messages:{
            "roleName":{
                required: '角色名称不能为空'
            },
            "orderNum":{
                required:'显示顺序不能为空'
            },
            "rolePermission":{
                required:'权限字符不能为空'
            }
        }
    });
    function save(){
        if(!$("form").valid()){
            // true验证规则全部成功
            return;
        }

        // 如何获取选中的所有节点的id
        let nodes=zTreeObj.getCheckedNodes(true);
        var formData = $("form").serialize();
        for(let i=0;i<nodes.length;i++){
            formData+='&resourceIds='+nodes[i].id;
        }
       $.operator.post('role/save',formData);
    }

    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        check: {
            enable: true
        },
        data:{
            simpleData:{
                enable: true,
                idKey: 'id',
                pIdKey: 'parentId'
            }
        },
        callback:{
            onClick:function(event,treeId,treeNode,clickFlagNumber){
                deptName = treeNode.name;
                deptId = treeNode.deptId;

            }
        }
    };

    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    var zNodes = [];

    $(document).ready(function(){
        if('${role.roleId}'==''){
            $.operator.post('resource/data', '', function (ret) {
                zNodes = ret.data;
                zTreeObj = $.fn.zTree.init($("#resourceTree"), setting, zNodes);
            })
        }else {
            $.operator.post('resource/dataCheck', {roleId:'${role.roleId}'}, function (ret) {
                zNodes = ret.data;
                zTreeObj = $.fn.zTree.init($("#resourceTree"), setting, zNodes);
            })
        }

    });
    function expandAll(obj){
        let flag = obj.checked;
        zTreeObj.expandAll(flag);
    }
    function checkAllNodes(obj){
        let flag = obj.checked;
        zTreeObj.checkAllNodes(flag);
    }
    function isGl(obj){
        let flag=obj.checked;
        if(!flag){
            let type =  { "Y" : "", "N" : "" };
            zTreeObj.setting.check.chkboxType = type;
        }else{
            let type =   { "Y" : "ps", "N" : "ps" };
            zTreeObj.setting.check.chkboxType = type;

        }
    }
</script>
</html>
